<!-- 秒杀部分内容 -->
<template>
  <div class="seckill-com">
    <!-- 秒杀的头部 -->
    <div class="seckill-top">
      <img
        src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978468241.png?imageView2/2/format/webp"
        alt=""
      />
      <!-- 秒杀时间 -->
      <div class="seckill-time">
        <span>{{ hours }}</span>
        <i>:</i>
        <span>{{ mins }}</span>
        <i>:</i>
        <span>{{ secs }}</span>
      </div>
      <!-- 更多 -->
      <a href="">
        更多
        <i class="iconfont icon-jiantou2"></i>
      </a>
    </div>
    <div class="seckill-list">
      <ul>
        <li v-for="seckillData in seckillDatas" :key="seckillData.id">
          <img :src="seckillData.goods_thumb" alt="" />
          <div class="title">{{ seckillData.title }}</div>
          <!-- 流通价格 -->
          <div class="currency-price">
            <span>
              <em>¥</em>
              <!-- 整数部分 -->
              <span>{{ seckillData.shop_price | setInt }}</span>
              <!-- 小数部分 -->
              <em>{{ seckillData.shop_price | setFloat }}</em>
            </span>
          </div>
          <!-- 折扣价格 -->
          <div class="rebate-price">
            <span>
              <em>¥</em>
              <!-- 整数部分 -->
              <span>{{ seckillData.market_price | setInt }}</span>
              <!-- 小数部分 -->
              <em>{{ seckillData.market_price | setFloat }}</em>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      seckillDatas: [
        {
          id: 1,
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
          title:
            "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
          shop_price: "10.00",
          market_price: "960.00",
        },
        {
          id: 2,
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
          title:
            "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
          shop_price: "10.00",
          market_price: "960.00",
        },
        {
          id: 3,
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
          title:
            "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
          shop_price: "10.00",
          market_price: "960.00",
        },
        {
          id: 4,
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
          title:
            "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
          shop_price: "10.00",
          market_price: "960.00",
        },
        {
          id: 5,
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
          title:
            "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
          shop_price: "10.00",
          market_price: "960.00",
        },
        {
          id: 6,
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
          title:
            "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
          shop_price: "10.00",
          market_price: "960.00",
        },
      ],
      hours: "",
      mins: "",
      secs: "",
      interId: "",
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    seckillCount() {
      let nowTime = new Date();
      let targetTime = new Date("2022-04-30 00:00:00");
      // 换算成秒
      var time = (targetTime - nowTime) / 1000;
      //   时
      var hours = parseInt((time / 60 / 60) % 24);
      this.hours = hours < 10 ? "0" + hours : hours;
      // 分
      var mins = parseInt((time / 60) % 60);
      this.mins = mins < 10 ? "0" + mins : mins;
      //   秒
      var secs = parseInt(time % 60);
      this.secs = secs < 10 ? "0" + secs : secs;
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.interId = setInterval(this.seckillCount, 1000);
  },
  beforeDestroy() {
    clearInterval(this.interId);
  },
};
</script>
<style lang="less">
.seckill-com {
  width: 100%;
  background-color: #fff;
  height: 23rem;
  //   秒杀的头部
  .seckill-top {
    width: calc(100% - 2rem);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      height: 1.5rem;
    }
    .seckill-time {
      width: 60%;
      display: flex;
      span {
        padding: 0.2rem 0.4rem;
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 2rem;
      }
      i {
        margin: 0 0.5rem;
      }
    }
    a {
      font-size: 1.3rem;
      border-left: 1px solid rgba(0, 0, 0, 0.3);
      padding-left: 0.8rem;
    }
  }
  //.秒杀列表
  .seckill-list {
    width: 100%;
    height: 19rem;
    overflow: auto;
    ul {
      width: 66rem;
      height: 19rem;
      li {
        float: left;
        height: 19rem;
        width: 11rem;
        img {
          height: 10rem;
          margin-left: 0.5rem;
        }
        .title {
          width: 90%;
          margin: 5%;
          height: 4rem;
          line-height: 2rem;
          font-size: 1.2rem;
          // 多行文本省略号
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        // 流通价格
        .currency-price {
          color: rgb(226, 44, 44);
          font-weight: 700;
          text-align: center;
          span {
            font-size: 1.5rem;
            em {
              font-size: 1rem;
            }
          }
        }
        // 折扣价格
        .rebate-price {
          text-align: center;
          color: #aaa;
          text-decoration: line-through;
        }
      }
    }
  }
  //   使滚动条隐藏
  .seckill-list::-webkit-scrollbar {
    display: none;
  }
}
</style>